<template>
    <div class="center">
        <div class="box1" id="map"></div>
        <div class="dataTime">{{currentDate }}</div>
        <div class="box2">
            <span class="box2-time">北京时间：{{ time }}</span>
            <div class="box2-info">
                <div style="width: 7%;display: flex;align-items: center;">
                    <i class="el-icon-arrow-left" style="font-size:43px;color: #08576d;font-weight: 600; "></i>
                </div>
                <div style="display: flex;width: 86%;">
                    <div class="box2-pai">
                        <div class="pai2">
                            <span>线上营销额</span>
                            <span>1500元</span>
                        </div>
                        <div class="pai2-txt">
                            <span>西环路营业厅</span>
                            <img style="width: 100%;height: 3px;margin: 10px 0;" src="../../../assets/images/line.png"/>
                            <div class="pai2-txt-type"><span>xx路</span><span>营业中</span></div>
                        </div>
                    </div>
                    <div class="box1-pai">
                        <div class="pai1">
                                <span>线上营销额</span>
                                <span>1500元</span>
                        </div>
                        <div class="pai1-txt">
                            <span>西环路营业厅</span>
                            <img style="width: 100%;height: 3px;margin: 10px 0;" src="../../../assets/images/line.png"/>
                            <div class="pai1-txt-type"><span>xx路</span><span>营业中</span></div>
                        </div>
                    </div>
                    <div class="box2-pai">
                        <div class="pai2">
                                <span>线上营销额</span>
                                <span>1500元</span>
                        </div>
                        <div class="pai2-txt">
                            <span>西环路营业厅</span>
                            <img style="width: 100%;height: 3px;margin: 10px 0;" src="../../../assets/images/line.png"/>
                            <div class="pai2-txt-type"><span>xx路</span><span>营业中</span></div>
                        </div>
                    </div>
                </div>
                <div style="width: 7%;display: flex;align-items: center;">
                    <i class="el-icon-arrow-right" style="font-size:43px;color: #08576d;font-weight: 600; "></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
var map=null
var interval_timer=null
import request from '@/utils/request'
import mapInfo from "../components/map.js"
import moment from "moment";
export default {
  name: "cockpitLeft",
  data() {
    return {
        time:"",
        currentDate:'',
        busList:[],
    };
  },
  components: {

  },
  mounted(){
    const week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
    interval_timer=setInterval(this.getTime,1000)
    const currentDate = moment().format('YYYY年MM月DD');
    const weekday = week[moment().day()];
    this.currentDate=currentDate+" "+weekday
    this.baiduMap()
  },
  beforeDestroy(){
    clearInterval(interval_timer); 
  },
  methods: {
    getTime(){
      this.time = moment().format('HH:mm:ss');
    },
    baiduMap() {
      map = new BMapGL.Map("map");
      map.centerAndZoom(new BMapGL.Point(114.462196,34.547524), 10);                   
      // 初始化地图,设置中心点坐标和地图级别。
      map.enableScrollWheelZoom();
      var name=["lankao","longting","xiangfu","weishi","tongxu","qixian","shunhe","gulou","yuwang"]
      var color=["#fdccff","#ff9a33","#feff32","#9acdff","#9aff00","#fecb33","#32ccff","#31cc01","#cc9afe"]
      if(mapInfo.boundaries!=''){
             var rs=mapInfo.boundaries
             //获取行政区域
             map.clearOverlays();        //清除地图覆盖物
             //网上查了下，东西经南北纬的范围
             var EN_JW = "180, 90;";         //东北角
             var NW_JW = "-180, 90;";       //西北角
             var WS_JW = "-180, -90;";       //西南角
             var SE_JW = "180, -90;";        //东南角

             //4.添加环形遮罩层
             var ply1 = new BMapGL.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, {
               strokeColor: "none",
               fillColor: "#132232",//#f8f8f8  修改不想显示的地图颜色
               fillOpacity: 1,
               strokeOpacity: 0.5
             }); //建立多边形覆盖物
             map.addOverlay(ply1);
      }
      for(var i=0;i<name.length;i++){
            var rs=mapInfo[name[i]]
            var ply = new BMapGL.Polygon(rs.boundaries[0], {
             strokeWeight: 2,
             strokeColor: color[i],
             fillColor: color[i],//显示的地图区域颜色设置
             fillOpacity: 0.8,
            });
            map.addOverlay(ply);
      }
      this.getBusList()
      
    },
    getBusList(){
        listBusInfo().then(res=>{
           //console.log(res.data.records)
           if(res.code==200){
              if(res.data){
                this.busList=res.data.rows
              }
           }
           this.mapReady()
        })
    },
    mapReady() {
      if(this.busList!=''){
        this.busList.forEach((element,index) => {
           if(element.busLatitude!=null&&element.busLongitude!=null){
              var imgPath=require('../../../assets/images/biaoji.png')
              var myIcon=null
              if(index%2==0){
                myIcon = new BMapGL.Icon(imgPath, new BMapGL.Size(10, 10));
              }else if(index%3==0){
                myIcon= new BMapGL.Icon(imgPath, new BMapGL.Size(13, 13));
              }else{
                myIcon= new BMapGL.Icon(imgPath, new BMapGL.Size(16, 16));
              }
              var poi = new BMapGL.Point(this.gdToBd(element.busLatitude,element.busLongitude).bdLng,this.gdToBd(element.busLatitude,element.busLongitude).bdLat);
              var marker = new BMapGL.Marker(poi,{
                 icon: myIcon
              }); //创建标注
              marker.id = element.id
              var opts = {
                width : 120,     // 信息窗口宽度
                height: 100,     // 信息窗口高度
              }
              var countNumber=element.countNumber!=null&&element.countNumber!=''?element.countNumber:0
              var sContent =
                `<div style="padding-left: 15px;font-size:16px;font-weight:600;">`+element.busName+`</div>` +
                `<div style="padding-left: 15px;">营销助手:<span style="padding-left: 10px;color:#ff8600;font-weight:600;">`+countNumber+`</span>位</div>` +
                `<div style="padding-left: 15px;">销售额:<span style="padding-left: 10px;color:#ff8600;font-weight:600;">0</span>元</div>`
              var infoWindow = new BMapGL.InfoWindow(sContent,opts);
              marker.addEventListener('click', function () {
                // _that.numtest = index
                this.openInfoWindow(infoWindow);
                // marker.setIcon(new BMapGL.Icon(require('../img/source.png'), new BMapGL.Size(28, 28)));

              });

              map.addOverlay(marker); //将标注添加到地图中
           }
        });
      }
    },
    // 高德地图坐标转百度地图坐标
    gdToBd(lat, lng) {
      let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
      let x = lng, y = lat;
      let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
      let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
      let bd_lng = z * Math.cos(theta) + 0.0065;
      let bd_lat = z * Math.sin(theta) + 0.006;
      return {
        bdLat: bd_lat,
        bdLng: bd_lng
      };
    }
  },
};
 // 查询营业厅列表
 export function listBusInfo(query) {
    return request({
      url: '/wxassistant/wcbus_hall_info/queryPage',
      method: 'get',
      params: query
    })
 }
</script>

<style scoped lang="scss">
    .center{
        width: 96%;
        margin: 1% 2% 0 2%;
        height: 99%;
        display: flex;
        flex-direction: column;
        .box1{
           width: 100%;
           height: 52%;
           border: none;
        }
        .dataTime{
            height: 5%;
            display: flex;
            margin-left: 60%;
            align-items: center;
            font-size: 18px;
            font-weight: 600;
            color: #fff;
        }
        .box2{
            width: 100%;
            height: 40%;
            background-image:  url(../../../assets/images/paiming.png);
            background-size: 100% 100%;
            padding: 20px;
            padding-top: 40px;
            padding-bottom: 10px;
            display: flex;
            flex-direction: column;
            .box2-time{
              height: 30px;line-height: 30px;color: #fff;font-size: 14px;font-weight: bold;
            }
            .box2-info{
                display: flex;
                width: 100%;
                height: 90%;
                justify-content: center;
                .box2-pai{
                    display: flex;
                    flex-direction: column;
                    width: 30%;
                    height: 100%;
                    color: #fff;
    
                    .pai2{
                        width: 100%;
                        height: 80%;
                        background-image:url(../../../assets/images/yuanquan.png);
                        background-size: 60% auto;
                        background-position: center center;
                        background-repeat: no-repeat;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        font-size: 14px;
                    }
                    .pai2-txt{
                       padding-top: 20px;
                       display: flex;
                       flex-direction: column;
                       font-size: 12px;
                       text-align: center;
                       justify-content: center;
                       .pai2-txt-type{
                        display: flex;
                        height: 35px;
                        line-height: 35px;
                        justify-content: space-between;
                       }
                    }
                }
                .box1-pai{
                    display: flex;
                    flex-direction: column;
                    width: 40%;
                    height: 100%;
                    color: #fff;
    
                    .pai1{
                        width: 100%;
                        height: 70%;
                        background-image:url(../../../assets/images/yuanquan.png);
                        background-size: 60% auto;
                        background-position: center center;
                        background-repeat: no-repeat;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        font-size: 14px;
                       
                    }
                    .pai1-txt{
                       display: flex;
                       flex-direction: column;
                       font-size: 12px;
                       text-align: center;
                       justify-content: center;
                       .pai1-txt-type{
                        width: 80%;
                        margin: 0 10%;
                        display: flex;
                        margin-top: 10px;
                        height: 35px;
                        line-height: 35px;
                        justify-content: space-between;
                       }
                    }
                }
            }
        }
    }
    ::v-deep .BMap_bubble_pop {
      padding: 0 !important;
      background: rgba(249, 249, 250, 0.781) !important;
      border: #ffffff solid 3px !important;
    }
    ::v-deep .anchorBL {
      display: none;
    }
</style>